<template>
    <div class="layerRtb layerRtb-threecolumn">
        <three-title :title="{name:'晋升'}"></three-title>
        <div class="layerRtb-scroll thinScroll" v-scrollHeight="137">
            <div class="analyItem anItemBor" tag="div" @click="clickFourShow(0)">
                <p class="analyItemTit tx-center">印记</p>
                <div class="analyItemCon">
                    <div class="textBox">
                        <p class="col-md-12">
                            <span class="NextLevelMoneyClass">亲爱的{{list.user_name}}项目经理，您已经与瑞祥风雨同舟{{list.seniorityMonth}}个月了，感谢您的不懈努力。</span>
                        </p>
                        <p class="col-md-12">
                            <span class="NextLevelMoneyClass">您已经加入瑞祥{{list.seniorityday}}天了。</span>
                        </p>
                        <p class="col-md-12">
                            <span class="NextLevelMoneyClass" v-if="list.userLevel>0">您已经升级{{list.userLevel}}次，降级0次。</span>
                            <span class="NextLevelMoneyClass" v-else>您已经降级1次。</span>
                        </p>
                        <p class="col-md-12">
                            <span class="NextLevelMoneyClass">您已签单{{list.countOrder}}个，本级竣工额{{jungong ? ((Number(money)+Number(jungong.surplus_money))/10000).toFixed(2) : (Number(money)/10000).toFixed(2)}}万。</span>
                        </p>
                        <p class="col-md-12">
                            <!-- <span class="NextLevelMoneyClass">您在瑞祥的总计收入为：{{list.countOrder}}元。</span> -->
                        </p>
                    </div>
                </div>
            </div>
               <div class="analyItem anItemBor" tag="div" @click="clickFourShow(0)">
                <p class="analyItemTit tx-center">历程</p>
                <div class="analyItemCon">
                    <div class="textBox">
                        <p class="col-md-12">
                            <span class="NextLevelMoneyClass">亲爱的{{list.user_name}}，您第一次入职时间{{course.inductionDate}}</span>
                        </p>
                        <p class="col-md-12">
                            <span class="NextLevelMoneyClass">您第一次接单时间{{course.publishTime}}</span>
                        </p>
                        <p class="col-md-12">
                            <span class="NextLevelMoneyClass">您第一次升级1次。</span>
                        </p>
                        <p class="col-md-12">
                            <span class="NextLevelMoneyClass">您第一次培训时间{{course.trainTime}}</span>
                        </p>
                        <p class="col-md-12">
                            <!-- <span class="NextLevelMoneyClass">您在瑞祥的总计收入为：{{list.countOrder}}元。</span> -->
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="layerRtb-footer">
            <div class="analyItem">
                <p class="analyItemTit tx-center">综合</p>
                <div class="analyItemCon">
                    <p class="col-md-4"><span class="cLightGray pr8">金额</span><span class="completedMoneyClassThree"></span></p>
                    <p class="col-md-4"><strong class="NowLevelClass cGreen"></strong>级升<strong class="NextLevelClass cRed"></strong>级</p>
                    <p class="col-md-4"><span class="cLightGray pr8">差额</span></p>
                    <!--    <p class="col-md-3"><span class="cLightGray pr8">状态</span>
                    <span class="isAgree cRed">{{(pmUpgrage.surplus_money ?  this.money+pmUpgrage.surplus_money-pmUpgrage.le_complete : this.money-pmUpgrage.le_complete)>0?'同意':'不同意'}}</span>
                    </p> -->
                </div>
            </div>
        </div>
        <!-- 四段渲染容器 -->
        <!-- 结余 Balance -->
        <!--   <transition-group class="animated faster" enter-active-class="animated faster slideInRight" leave-active-class="animated faster slideOutRight">
            <rx-balance v-if="fourIndex === 0" :key="0"></rx-balance>
        </transition-group> -->
        <!-- 历史 Balance -->
        <transition-group class="animated faster" enter-active-class="animated faster slideInRight" leave-active-class="animated faster slideOutRight">
            <rx-history v-if="fourIndex === 0" :key="0"></rx-history>
        </transition-group>
    </div>
</template>
<script>
import {
    mapGetters
} from 'vuex'
import { findByHisYJ, findMeCourse } from '../../Resources/Api/index'

export default {
    data () {
        return {
            list: {},
            jungong: 0,
            money: 0,
            course: {}
        }
    },

    created () {
        this.findByHisYJ()
        this.findCourse()
        this.jungong = this.$route.query.jungong
        this.money = this.$route.query.money
    },
    methods: {
        findCourse () {
            let _this = this
            _this.course = {}
            findMeCourse({
                uid: this.leftInfo.uid,
                appCard: this.leftInfo.app_cardNo
            }).then(results => {
                _this.course = results.data.Body
            }).catch(err => {
                console.log(err)
            })
        },
        findByHisYJ () {
            findByHisYJ({
                uid: this.leftInfo.uid
            }).then(results => {
                this.list = results.data.Body
            }).catch(error => {
                console.log(error)
            })
        },
        clickFourShow (index) {
            this.fourIndex = index
        }
    },
    computed: {
        ...mapGetters(['leftInfo'])
    },
    watch: {
        leftInfo () {
            this.findByHisYJ()
        }
    }
}

</script>
